import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import header from "./index.module.css";

export default class Header extends PureComponent {
  static propTypes = {
    addTodo: PropTypes.func.isRequired,
  };

  // 输入框回车事件
  inputEnter = (event) => {
    const { keyCode, target } = event;
    // 判断是否为回车
    if (keyCode === 13) {
      if(target.value.trim() === "") return alert('输入内容不能为空!')
      const { addTodo } = this.props;
      addTodo(target.value);
      target.value = "";
    }
  };

  render() {
    return (
      <div style={{ width: "100%" }}>
        <input
          type="text"
          className={header.input}
          placeholder="请输入任务，按回车确认"
          onKeyUp={this.inputEnter}
        />
      </div>
    );
  }
}
